<template>
	<view>
		<view class="quesList">
			<view class="quesTit">
				<view class="queType"><text v-if="currPage === 'studyPage'">{{currIndex}}.</text>{{item.lqType}}</view>
				<view class="queTitCon">
					<rich-text :nodes="formatImgRichText(item.lqSub)"></rich-text>
				</view>
			</view>
			<view class="quesOptions">
				<view class="queLayer posAbso" v-if="item.result >= 0"></view>
				<template v-if="item.lqType == '单选题' || item.lqType == '判断题'">
					<button class="optionsItem"
						:class="singleClasses(item,sonSingleIndex)"
						v-for="(sonSingleItem,sonSingleIndex) in item.answerOptionArray"
						:key="sonSingleIndex"
						@tap="selectOption(index,sonSingleIndex,transOptToWords(sonSingleIndex))"
					>
						<view class="optionsNum">{{transOptToWords(sonSingleIndex)}}</view>
						<view class="optionsCon">
							<template v-if="!checkIsImg(sonSingleItem)">{{sonSingleItem}}</template>
							<template v-else>
								<img class="optImg" :src="getUrl(sonSingleItem)"/>
							</template>
						</view>
					</button>
				</template>
				<template v-else-if="item.lqType == '多选题'">
					<button class="optionsItem"
						:class="multiClasses(item,sonMultiItem)"
						v-for="(sonMultiItem,sonMultiIndex) in item.multiOptIndexArr"
						:key="sonMultiIndex"
						@tap="selectMultiOption(index,sonMultiIndex,transOptToWords(sonMultiIndex))"
					>
						<view class="optionsNum">{{transOptToWords(sonMultiIndex)}}</view>
						<view class="optionsCon">
							<template v-if="!checkIsImg(item.answerOptionArray[sonMultiIndex])">{{item.answerOptionArray[sonMultiIndex]}}</template>
							<template v-else>
								<img class="optImg" :src="getUrl(item.answerOptionArray[sonMultiIndex])"/>
							</template>
							<!-- <template v-if="typeof item.answerOptionArray[sonMultiIndex] == Number">{{item.answerOptionArray[sonMultiIndex]}}</template>
							<template v-else><rich-text :nodes="formatImgRichText(item.answerOptionArray[sonMultiIndex])"></rich-text></template> -->
						</view>
					</button>
				</template>
				<template v-else-if="item.lqType == '填空选择题'">
					<view class="optionsItem"
						v-for="(sonTkItem,sonTkIndex) in item.answerOptionArray" 
						:key="sonTkIndex"
					>
						<view class="optionsNum">{{transOptToWords(sonTkIndex)}}</view>
						<view class="optionsCon">
							<template v-if="!checkIsImg(sonTkItem)">{{sonTkItem}}</template>
							<template v-else>
								<img class="optImg" :src="getUrl(sonTkItem)"/>
							</template>
							<!-- <template v-if="typeof sonTkItem == Number">{{sonTkItem}}</template>
							<template v-else><rich-text :nodes="formatImgRichText(sonTkItem)"></rich-text></template> -->
						</view>
					</view>
				</template>
			</view>
		</view>
		<view class="queTkOptions" v-if="item.lqType == '填空选择题'">
			<!-- 填空选择题选项 -->
			<template v-if="item.completeStatus == 0">
				<view class="tkItem"
					v-for="(innerItem,innerIndex) in item.answerNum"
					:key="innerIndex"
				>
					<view class="tkItemTit">选项{{(innerIndex+1)}}:</view>
					<view class="tkOptsWrap">
						<view class="itemRadCon"
							v-for="(jjItem,jjIndex) in item.answerOptionArray"
							:key="jjIndex"
							@tap="selectTkOpt(index,innerIndex,jjIndex)"
						>
							<!-- active -->
							<view class="radView" :class="[item.tkOptIndexArr[innerIndex].tkIndex == jjIndex ? 'active' : '']"><view class="iconfont icon-duihao"></view></view>
							<view class="radTit">{{transOptToWords(jjIndex)}}</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else-if="item.completeStatus == 1">
				<!-- 填空选择题解答 -->
				<view class="myTkAns">
					<text>我的解答:</text>
					<text class="tkAns">{{item.currAns}}</text>
					<text class="iconfont icon-duihao1" v-if="item.result == 1"></text>
					<text class="iconfont icon-wrong" v-if="item.result == 0"></text>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item:{
				type:Object
			},
			currPage:{
				type:String,
				default:'studyPage'
			},
			index:Number,
			currIndex:{
				type:Number,
				default:0
			}
		},
		computed:{
			getUrl(url){
				return function(url){
					return this.zhuXueServer + '/' + url
				}
			},
			singleClasses(){
				return function(item,sonSingleIndex){
					return{
						'active' : item.optIndex == sonSingleIndex,
						'rightAns' : item.result == 1 && item.myAnsSingleIndex == sonSingleIndex,
						'errorAns' : item.result == 0 && item.myAnsSingleIndex == sonSingleIndex
					}
				}
			},
			multiClasses(){
				return function(item,sonMultiItem){
					return{
						'active' : sonMultiItem.selFlag && item.result == -1,
						'rightAns' : item.result == 1 && sonMultiItem.selFlag,
						'errorAns' : item.result == 0 && sonMultiItem.selFlag
					}
				}
			},
			checkIsImg(){
				return function(content){
					if(content != undefined ){
						var reg = new RegExp("Module/", "g");
						if(content.indexOf('Module/') != -1){
							return true;
						}else{
							return false;
						}
					}
				}
			},
			//设置img宽度
			formatImgRichText(){
				return function(content){
					if(content != undefined ){
						var reg = new RegExp("<img", "g");
						if(content.indexOf('<img') != -1){
							return content.replace(reg, '<img style="max-width:100%;height:auto;display:block"')
						}else{
							return content
						}
					}
				}
			},
			//数字->字母
			transOptToWords(){
				return function(number){
					var tmpWords = '';
					if(number == 0){
						tmpWords = "A";
					}else if(number == 1){
						tmpWords = "B";
					}else if(number == 2){
						tmpWords = "C";
					}else if(number == 3){
						tmpWords = "D";
					}else if(number == 4){
						tmpWords = "E";
					}else if(number == 5){
						tmpWords = "F";
					}
					return tmpWords;
				}
			}
		},
		methods:{
			selectOption(index,currNum,myAns){
				this.$emit('selectOption',index,currNum,myAns)
			},
			selectMultiOption(index,innerIndex,myAns){
				this.$emit('selectMultiOption',index,innerIndex,myAns)
			},
			selectTkOpt(parIndex,ansNumIndex,jjIndex){
				this.$emit('selectTkOpt',parIndex,ansNumIndex,jjIndex);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/zhuxueQue.scss';
	.queTkOptions{
		margin-top: 30rpx;
		.myTkAns{
			color: $pss-text-color3;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			.tkAns{
				margin: 0 15rpx;
			}
			.iconfont{
				font-size: 50rpx;
				&.icon-duihao1{
					color: $pss-color-green; 
				}
				&.icon-wrong{
					color: $pss-color-red;
				}
			}
		}
		.tkItem{
			height: 100rpx;
			display: flex;
			align-items: center;
			color: $pss-text-color3;
			font-size: 30rpx;
			padding: 0 20rpx;
			background: #fff;
			border-radius: 15rpx;
			margin-bottom: 30rpx;
			.tkItemTit{
				width: 100rpx;
				flex-shrink: 0;
			}
			.tkOptsWrap{
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: flex-start;
			}
		}
	}
	.itemRadCon{
		width: 95rpx;
		height: 100%;
		display: flex;
		align-items: center;
		font-size: 34rpx;
		.radView{
			width: 36rpx;
			height: 36rpx;
			line-height: 36rpx;
			border: 1rpx solid #eee;
			border-radius: 50%;
			color: #fff;
			text-align: center;
			margin-right: 10rpx;
			.icon-duihao{
				font-size: $font-size24;
			}
			&.active{
				border: 1rpx solid $pss-color-primary_1;
				background: $pss-color-primary_1;
			}
		}
		.radTit{
			color: $pss-text-color3;
		}
	}
</style>